_package("caf.ui");

_import("caf.mui.Pane");

/**
 * CloudApp编辑面板
 */
_class("PaneCap", Pane, function(){
	this._init = function(){
		_super._init.call(this);
		this._list = [
			{"id": 0, "name": "搜索"    , "icon": "res/images/icons/sh.jpg", "thumb": ""               , "icon2": "icon_s_search.png"   },
			{"id": 1, "name": "城市头条", "icon": "res/images/icons/cl.jpg", "thumb": ""               , "icon2": "icon_s_citylife.png" },
			{"id": 2, "name": "云微博"  , "icon": "res/images/icons/wb.jpg", "thumb": ""               , "icon2": "icon_s_yunweibo.png" },
			{"id": 3, "name": "Home"    , "icon": "res/images/icons/xx.jpg", "thumb": "thumb_home.png" , "icon2": "icon_s_home.png"     },
			{"id": 4, "name": "趣淘"    , "icon": "res/images/icons/qt.jpg", "thumb": "thumb_qutao.png", "icon2": "icon_s_qutao.png"    },
			{"id": 5, "name": "地图"    , "icon": "res/images/icons/mp.jpg", "thumb": ""               , "icon2": "icon_s_juhuasuan.png"},
			{"id": 6, "name": "xxxx"    , "icon": ""                       , "thumb": ""               , "icon2": "icon_s_blank.png"    }
		];
		this._callback = "";
	};
	this.create = function(parent, app){
		this.setParent(parent);
		this._app = app;
		var obj = this.createTplElement(parent, "pane_cap.xml");
		this.init(obj);
		return obj;
	};
	this.init = function(obj){
		_super.init.apply(this, arguments);
		var pathimg = runtime.getConfigData("pathimg") + "homeshell/";
		var sb = [];
		for(var i = 0, len = this._list.length; i < len; i++){
			sb.push('<li _action="app_add"' + (i == len - 1 ? ' class="last"' : '') + '><div class="box"><div style="background-image:url(' + pathimg + this._list[i].thumb + ');"></div></div><label>' + this._list[i].name + '</label><a href="#" _action="app_remove"></a></li>');
		}
		this.find(".app-thumbs ul").innerHTML = sb.join("");
		sb = [];
		for(var i = 0, len = this._list.length; i < len; i++){
			sb.push('<li' + (i == len - 1 ? ' class="last"' : '') + ' style="background-image:url(' + pathimg + this._list[i].icon2 + ');"></li>');
		}
		this.find(".app-icons ul").innerHTML = sb.join("");
		this.initActionElements(this._self, this, ["li"]);
		var thumbs = this.find(".app-thumbs");
		var bg = this.find(".app-icons div.bg");
		var ul1 = this.find(".app-thumbs ul");
		var ul2 = this.find(".app-icons .icons");
		thumbs.onmousemove = function(ev){
			var w1 = thumbs.offsetWidth;
			var pos = runtime._element.getPos(this, document.body);
			var x = ev.pageX - pos.x;
			ul1.style.left = -Math.round(x * (ul1.offsetWidth - w1) / w1) + "px";
			bg.style.left  = Math.round(x * (ul2.offsetWidth - bg.offsetWidth) / w1) + "px";
		};
	};
	this.dispose = function(){
		_super.dispose.apply(this);
	};
	this.do_pane_close = function(act, sender){
		console.log("pane_close");
		this.getParent().showPaneCap(false);
		runtime.getWorkspace().hideAppBox();
		window[this._callback]("end");
	};
	this.do_app_add = function(act, sender){
		console.log("app_add");
		window[this._callback]("ok");
	};
	this.do_app_remove = function(act, sender){
		console.log("app_remove");
	};
});